
<template>

  <div class="PriceView">
    <div class="demo-collapse price">
      <div class="header">
        <span class="cg">场馆维护 / </span>
        <span>价格设置</span>
      </div>
      <el-collapse accordion>
        <el-collapse-item :name="item.id" v-for="item in StadiumData" :key="item.id"
          @click.stop="data = item.sports[0].id; PriceList()">
          <template #title>
            <div class="pic">场馆</div>
            <span>{{ item.name }}{{ item.id }}</span>
          </template>
          <div class="bottom">
            <div class="bol">
              <a v-for="item1 in item.sports" :key="item1.id" @click.self="data = item1.id; PriceList()">{{
                item1.sport_type_codeName
              }}</a>
            </div>
            <div class="tabprice">
              <div class="hd">
                <div class="left">
                  <el-icon>
                    <Wallet />
                  </el-icon>
                  <span>临时价格表</span>
                </div>
                <span class="blue" @click.stop="showEdit = false; showAdd = true">新增标准价格规则</span>
              </div>
              <div class="biao">
                <el-table :data="tableData" border style="width: 100%">
                  <el-table-column align="center" prop="date" label="时间段" width="140" height="146px" />
                  <el-table-column align="center" prop="name" label="卡等级" width="120" />
                  <el-table-column align="center" prop="days" label="工作日/节假日" width="130" />
                  <el-table-column align="center" prop="fields" label="场地" width="120" />
                  <el-table-column align="center" prop="price" label="价格（元/小时）" width="137" />
                  <el-table-column align="center" prop="item" label="有效时间" width="140" />
                  <el-table-column fixed="right" prop="id" label="操作" width="160">
                    <template #default="id">
                      <el-button link type="primary" size="small"
                        @click.stop="showEdit = true; showAdd = true; addPriceList(id)">修改</el-button>
                      <el-button link type="primary" size="small"
                        @click.stop=" open(id);">删除</el-button>
                        
                        
                    </template>
                      
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- 新增弹框开始 -->
      <el-dialog v-model="showAdd" title="新增标准价格">
        <template #header="{ titleId, titleClass }">
          <div class="my-header">
            <h4 :id="titleId" :class="titleClass">
              <el-icon :size="30" :color="red">
                <Edit />
              </el-icon>
              <span>新增标准价格</span>
            </h4>
          </div>
        </template>
        <el-form :model="AddPrice" class="addForm" label-width="90">
          <el-form-item class="time" label="时间段" prop="data">
            <el-input v-model="AddPrice.start_time" />
            一
            <el-input v-model="AddPrice.end_time" />
          </el-form-item>
          <el-form-item label="卡等级" prop="card_types">

            <el-checkbox-group v-model="AddPrice.card_types" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="city, index in cities" :key="city" :label="index + 1">{{ city }}
              </el-checkbox>
            </el-checkbox-group>
            <span @click="chackAll([1, 2, 3])">&emsp; 全选</span>
          </el-form-item>
          <el-form-item label="日期类型" prop="days">
            <div>
              <el-checkbox-group v-model="AddPrice.days" @change="handleCheckedCitiesChange">
                <el-checkbox :label="index + 1" v-for="item, index in cities2" :key="index">{{ item }}</el-checkbox>
              </el-checkbox-group>

            </div>

          </el-form-item>
          <el-form-item label="场地">
            <el-checkbox-group v-model="AddPrice.field_ids" @change="handleCheckedCitiesChange2">
              <el-checkbox v-for="city, index in cardList" :key="city"
                :label="{ field_id: index + 1, field_name: '场地' + city }">{{
                  city }}
              </el-checkbox>

            </el-checkbox-group>
            <span
              @click="AddPrice.field_ids = [{ field_id: 1, field_name: '场地一' }, { field_id: 2, field_name: '场地二' }, { field_id: 3, field_name: '场地三' }, { field_id: 4, field_name: '场地四' }, { field_id: 5, field_name: '场地五' }, { field_id: 6, field_name: '场地六' },]">&emsp;
              全选</span>
          </el-form-item>
          <el-form-item class="price2" label="价格" prop="price">
            <el-input v-model="AddPrice.price" />
            <span>元/小时</span>
          </el-form-item>
          <el-form-item label="有效期" prop="name">
            永久有效
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatePrice" v-if="showEdit">修改</el-button>
            <el-button type="primary" @click="addPrice" v-else>保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 新增弹框结束 -->
    </div>
  </div>
</template>
  
<script setup>
import { Getprice, GetStadium, PutPrice, DelPrice, PostPrice } from '../../../../api/system';
import { ref, toRaw } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
const checkAll = ref(false)
const data = ref(0)
const cities = ['金卡', '银卡', '铜卡']
const isIndeterminate = ref(true)
const showEdit = ref(false)
const checkAll2 = ref(false)
const cities2 = ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '节假日', '调整日']
const cardList = ['一', '二', '三', '四', '五', '六']
const isIndeterminate2 = ref(true)
// 添加价格
const AddPrice = ref({
  sport_id: '',
  days: [],
  start_time: '',
  end_time: '',

  field_ids: [],
  card_types: [],
  price: ''
})
const putPrice = ref({

  "id": "278",
  "sport_id": "1266",
  "field_id": "3",
  "field_name": "场地十"

})
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
const open = (id) => {
  ElMessageBox.confirm(
    '',
    '确认删除吗',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      handleClick(id);
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const handleCheckedCitiesChange2 = (value) => {
  const checkedCount2 = value.length
  checkAll2.value = checkedCount2 === cities2.length
  isIndeterminate2.value = checkedCount2 > 0 && checkedCount2 < cities2.length
}
const handleClick = (e) => {
  DelPrice(e.row.id).then(res => {
    console.log(res);
    PriceList()
  })
  console.log(e.row.id);
}
const addPriceList = (e) => {
  putPrice.value.id = e.row.id;
  putPrice.value.sport_id = data.value;
  putPrice.value.field_id = e.row.field_id;
  AddPrice.value.id = e.row.id
  AddPrice.value.price = e.row.price
  AddPrice.value.field_ids = [{ field_id: cardList.indexOf(e.row.fields[2]) + 1, field_name: e.row.fields }]
  AddPrice.value.card_types = [cities.indexOf(e.row.name)]
  AddPrice.value.start_time = e.row.date.split('—')[0]
  AddPrice.value.end_time = e.row.date.split('—')[1]
  AddPrice.value.days = e.row.days.split(',').map(item => item * 1)

  console.log(e.row.fields[2]);
}

const updatePrice = () => {
  putPrice.value.field_name = AddPrice.value.field_ids[0].field_name
  // console.log(6);
  PostPrice(putPrice.value).then(res => {
    console.log(res);
    showAdd.value = false;
    AddPrice.value = {};
    PriceList();
  })
  ElMessage({
        type: 'success',
        message: '修改成功',
      })
}

// 定义弹框是否显示
const showAdd = ref(false);
// 价格表格数据
const tableData = ref([
  {
    date: '1',
    name: '1',
    address: '1',
    price: '1',
    fields: '',
    days: ''


  }

])
// 定义StadiumData 储存场馆信
const StadiumData = ref([
  {
    id: 1,
    name: '',
    sports: ''
  }
])

// 封装函数 请求场馆列表
const StadiumList = () => {
  GetStadium({ company_id: null }).then(res => {
    StadiumData.value = res.data.data.map(item => {
      return {
        id: item.id,
        name: item.name,
        sports: item.sports,

      }
    })
    // console.log(res.data.data);
    // console.log(StadiumData.value);
  })
}

StadiumList()
const PriceList = () => {
  AddPrice.value = {};
  AddPrice.value.sport_id = data.value + '';
  // console.log(data);
  Getprice({ sport_id: data.value }).then(res => {
    console.log(res);
    let arr = ['金卡', '银卡', '铜卡'];
    tableData.value = res.data.data.map(item => {
      console.log(res, data.value);
      return {
        date: item.start_time + ' — ' + item.end_time,
        name: arr[item.card_type - 1],
        address: item.address,
        price: item.price,
        days: item.days.join(),
        fields: item.fields.map(item => item.field_name).join(),
        field_id: item.fields.map(item => item.field_id)[0],
        item: '永久有效',
        id: item.id

      }

    });
    // console.log(res.data.data);
    // console.log(tableData.value);

  })
}
const addPrice = () => {
  PutPrice(toRaw(AddPrice.value)).then(res => {
    if (res.data.code == 0) {
      PriceList(AddPrice.value.sport_id)
      showAdd.value = false;
      AddPrice.value = {}
    }
    console.log(res.data.msg);
  })

}

function chackAll(list) {
  AddPrice.value.card_types = list;
}
</script>
  
<style>
.PriceView {
  .el-icon {
    color: gray;
    margin-left: 20px;
    margin-right: 10px;
  }

  .hd .el-icon {
    color: #f0ac0f;
    font-size: 25px;
    margin-right: 16px;
  }

  .el-collapse {
    border-top: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
  }

  .el-dialog__title {
    display: flex;
    align-items: center;
  }
}
</style>
<style scoped lang="scss">

// .dialog-footer button:first-child {
//   margin-right: 10px;
// }
.PriceView {
  // overflow: hidden;
  background-color: #f5f5f5;
  height: 200vh;

  .price {
    width: 80%;
    margin: 0 auto;

    .header {
      height: 54px;
      color: #5e5e5e;
      line-height: 60px;

      .cg {
        color: #282828;
        font-size: 18px;
      }
    }

    .pic {
      display: inline-block;
      margin-left: 10px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #fcd67a;
      color: white;
      font-size: 12px;
      line-height: 30px;
      text-align: center;
      margin-right: 10px;
    }

    .bottom {
      background-color: #f5f5f5;

      .bol {
        height: 50px;
        padding-left: 84px;
        margin-bottom: 10px;
        background-color: #fff;
        border-top: 1px solid #e5e5e5;

        a {
          display: inline-block;
          width: 100px;
          height: 38px;
          text-align: center;
          line-height: 38px;
          color: #464646;
          cursor: pointer;

          &:hover {
            background-color: #fddd73;
            color: white;
          }
        }
      }

      .tabprice {
        padding: 10px 40px;
        box-sizing: border-box;
        background-color: #fff;

        .hd {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 50px;
          margin-bottom: 20px;

          .left {
            display: flex;
            align-items: center;
          }

          .blue {
            width: 108px;
            height: 26px;
            border-radius: 4px;
            color: white;
            background-color: #a4d2f4;
            text-align: center;
            line-height: 26px;
            font-size: 12px;
          }
        }
      }
    }

    .my-header {
      h4 {
        color: rgb(230, 166, 111);
      }
    }

    .time {
      .el-input {
        width: 30%;
      }
    }

    .price2 {
      width: 400px;

      .el-input__wrapper {
        display: inline-block;
      }

      .el-input {
        width: 200px;
      }
    }
  }
}
</style>